<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" fixed />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image round class="avatar" :src="pObj.photo" @click="imgFn"/>
          <!-- 为了出现一个图片选择窗口, 要使用input[type=file]的原生标签
            只能用v-show(因为要确保它在dom上, js方式来触发它点击事件, 导致默认行为 - 窗口出现)
          -->
          <input
            type="file"
            ref="iptFile"
            v-show="false"
            accept="image/*"
            @change="selImageFn"
          />
        </template>
      </van-cell>
      <van-cell title="名称" :value = "pObj.name" is-link @click="nameFn"  />
      <van-cell title="生日" :value = "pObj.birthday" is-link @click="dateShow=true" />
    </van-cell-group>

    <!-- 修改名称的弹出层 -->
    <van-dialog v-model="show" title="修改名称" show-cancel-button :before-close="closeFn">
    <!-- 因为外层没有form表单, 无法使用rules规则，需要自己写正则 -->
    <van-field v-model="value" placeholder="请输入用户名" input-align="center" v-focus/>
    </van-dialog>

    <van-popup v-model="dateShow" position="bottom" round>
        <!-- 时间选择器 -->
        <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        v-show="dateShow"
        @confirm="confirmDateFn"
        />
    </van-popup>

  </div>
</template>

<script>
import { getUserProfileAPI, uploadPhotoAPI, updateProFileAPI } from '@/api'
import Notify from '@/ui/Notify'
import moment from 'moment'
export default {
  name: 'UserEdit',
  data () {
    return {
      pObj: {}, // 接收个人简介
      show: false, // 名称弹出框的显示/隐藏
      value: '', // 名称 弹出框内容
      minDate: new Date(1900, 1, 1), // 最小时间范围
      maxDate: new Date(), // 最大时间 今天
      currentDate: new Date(), // 当前时间(将来获取完数据, 再设置给默认选中的值)
      dateShow: false // 弹出层显示/隐藏
    }
  },
  async created () {
    const [, res] = await getUserProfileAPI()
    // console.log(res)
    this.pObj = res.data.data
    this.currentDate = new Date(res.data.data.birthday) // new Date('xxx-xx-xx')
    // 补充知识点:
    // new Date(2017, 1, 1) 2017年1月1日
    // new Date("2017-1-1") 2017年1月1日
  },
  methods: {
    imgFn () { // 点击图片事件
      // 目标: 点击的是van-image,让input[type=file]标签实现点击事件 -> 导致默认行为(选择文件窗口出现)
      this.$refs.iptFile.click() // 手动调用input:file的点击事件
    },
    async selImageFn (e) { // 文件选择事件
      console.log(e.target.files[0]) // File 文件对象
      // 目标: 发给后台-发现我们应该传一个file文件给后台, 用new FormData() - 表单对象
      const fd = new FormData() // 表单对象
      console.log(e.target.files[0].size) // 图片大小
      fd.append('photo', e.target.files[0])
      const [, res] = await uploadPhotoAPI(fd)
      // console.log(res)
      this.pObj.photo = res.data.data.photo // 修改头像地址
    },
    async nameFn () { // 名称 单元格点击事件
      this.show = true // 显示弹出框
      this.value = this.pObj.name
    },
    async closeFn (action, done) { // 弹窗关闭前的回调函数
      // action的值是 "confirm" / "cancel" (用户点击了确定/取消)
      // done()执行就是关闭弹窗, done(false)阻止弹窗关闭
      if (action === 'cancel') done()
      else { // 点的确定
        // 目标：验证输入框的值是否在1-7个"中英文字符"
        if (/^[a-zA-Z\u4e00-\u9fa5]{1,7}$/.test(this.value)) { // 通过 原地返回true
          // 发请求给后台更新名字
          const [err] = await updateProFileAPI({
            name: this.value
          })
          if (!err) { // 更新成功
            Notify({
              type: 'success',
              message: '更新成功'
            })
            this.pObj.name = this.value
          } else { // 更新失败 - 提示
            Notify({
              type: 'erroe',
              message: '用户名重复'
            })
          }
          done()
        } else { // 通不过
          done(false) // 不关闭弹窗
          Notify({
            type: 'warning',
            message: '请输入1-7位中英文字符'
          })
        }
      }
    },
    async confirmDateFn () {
      const [err, res] = await updateProFileAPI({
        birthday: moment(this.currentDate).format('YYYY-MM-DD') // 后台要求 '年-月-日'格式
      })
      this.dateShow = false // 关闭弹出层
      if (!err) {
        this.pObj.birthday = res.data.data.birthday // 后台返回的是"年-月-日"格式的日期，显示到页面上
      }
    }
  }
  // 目标: 修改生日
  // 1. 点击弹出底部-时间选择器(Popup/datetimepicker)
  // 2. 设置相关的组件标签和变量, 3个变量要的都是new Date
  // 3. 默认隐藏popup, 点击生日单元格, 出现dateshow变量=true
  // 4. 默认显示的时间, 应该是用户的默认生日(给currentDate赋值)
  // (重要): 用户在datepicker上选择的时间, 保存在了currentDate变量里(date对象)
  // 5. 监测用户点了确定 - @confirm事件
  // 6. 发给后台(后台要的是年-月-日字符串), 保存-前端更新

  // 目标: 更换头像
  // 1. van-image绑定点击事件, 在点击事件中, 触发准备好的input[type=file]标签的"点击事件", 导致默认行为弹出文件选择窗口
  // 2. 监听input[type=file]标签, change事件-证明用户已经选择了图片
  // 3. 获取用户选择的图片文件, (e.target.files[0])
  // 4. 创建一个FormData表单对象, 把文件转进去, 发给后台
  // 5. 响应时, 后台返回图片文件在服务器上的photo地址, 更新到页面上

  // 额外补充:
  // 请求和响应
  // cors补充: http://lidongxuwork.gitee.io/pages/webFront/%E6%B5%8F%E8%A7%88%E5%99%A8/CORS.html
  // 请求体内容类型总结:
  // 3种:
  // 第一种:
  // 请求头:
  // Content-Type: application/x-www-form-urlencoded
  // 请求体:
  // 内容格式: 参数名=值&参数名=值

  // 第二种:
  // 请求头:
  // Content-Type: application/json
  // 请求体:
  // 内容格式: "{参数名: 值, 参数名: 值}"

  // 第三种
  // 请求头:
  // Content-Type: multipart/form-data  分隔符
  // 请求体:
  // new FormData()装起来
  // 分割符分开的一个请求体包(具体的看浏览器Headers下最下面, 访问sources形式)

  // 传递图片如果非要用第一种和第二种
  // 必须把图片文件转成base64字符串传给后台, 而且"后台"要把base64解密才能得到图片真实的数据
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>
